<template>
  <div class="Articlefl maincon">
    <!-- table -->
    <el-card shadow="hover" class="treetable">
      <el-table
          v-loading="loading"
          element-loading-text="耗尽脑汁加载中"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
      >
        <el-table-column label="封面" width="150">
          <template #default="scope">
            <el-image
                style="width: 150px; height: 100px"
                :src="scope.row.imag"
                :preview-src-list="[scope.row.imag]"
                :preview-teleported="true"
            />
          </template>
        </el-table-column>
        <el-table-column prop="aid" label="菜谱ID" ></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="handleDelete(scope.row.id)"
            >
              <el-button type="danger" plain style="margin-left: 10px" slot="reference">删除<i class="el-icon-close"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import request from "@/router/request";

export default {
  name: "Announcement",
  data(){
    return{
      form:{},
      imgurl:"",
      viewDialogVis: false,
      dialogVisible: false,
      tableData: [],
      announcement1:{}
    }
  },
  created() {
    this.load()
  },
  methods:{

    load(){
      request.get("/announcement").then(res=>{
        this.tableData=res.data
      })
    },
    handleDelete(id){
      request.delete("/announcement/"+id).then(res=>{
        console.log(res)
        this.$message.success("删除成功")
        this.load()
      })
    }
  }
}
</script>

<style lang='scss' scoped>


.Articlefl {
  .topsearch {
    height: 15%;
    .el-form-item {
      // margin-bottom: 0;
    }
  }
  .treetable {
    margin-top: 20px;
    height: calc(100% );
    // max-height: calc(90% - 20px);
    overflow-y: auto;
    // padding-bottom: 50px;

  }
}
</style>
